<template>
  <div class="wechat-menu-list">
    <h1>文章管理</h1>
    <router-link to="/article/add" class="el-button el-button--primary">添加文章</router-link>

    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column prop="title" label="名称" width="180">
      </el-table-column>

      <el-table-column label="操作">
        <template scope="scope">
          <el-button @click="editArticle(scope.row.id)" type="text" size="small" >编辑</el-button>
          <el-button @click="deleteArticle(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="count">
    </el-pagination>


  </div>
</template>

<script>

    export default {
        name: 'wechat-menu-list',
        data() {
            console.log(this.$route.params.page);
            return {
                currentPage:1,
                count:0,
                loading:true,
                apiUrl: apiUrl,

                //分类列表
                list:[]

            }
        },

        mounted() {
            this.$nextTick(function () {
                this.currentPage = this.$route.params.page;
                this.load(1); //概况
            })
        },
        methods: {
            editArticle(id){
                this.$router.push('/article/edit/'+id);
            },
            deleteArticle(id){
                var url = this.apiUrl + 'Article/delete';
                this.$http.get(url, {
                    params: { id: id }
                }).then(response => {
                    if(response.data.status==1){
                    this.$message.success('删除成功');
                    this.load(this.$route.params.page);
                }else{
                    this.$message.error('删除失败');
                }
            }, response => {
                    this.$message.error('删除失败');
                    console.log(response);
                });
            },
            //概况数据获取
            load(page) {
                this.$http.get(this.apiUrl + 'Article/articles?page='+page).then(response => {
                    this.loading = false;
                console.log(response.data);
                this.list = response.data.list;
                this.count = response.data.count;
//                    this.currentPage = this.$route.params.page ? this.$route.params.page : 1;
            }, response => {
                    this.$message.error('加载失败');
                    console.log(response);
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.$router.push('/article/list/'+val);
                this.load(val);
            }

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
